<script setup lang="ts">
const list = ref([]);

const optionList = [
  {
    id: 1,
    color: "#e51e22",
    score: 1,
    name: "红球",
  },
  {
    id: 2,
    color: "#fbe631",
    score: 2,
    name: "黄球",
  },
  {
    id: 3,
    color: "#34af51",
    score: 3,
    name: "绿球",
  },
  {
    id: 4,
    color: "#754118",
    score: 4,
    name: "棕球",
  },
  {
    id: 5,
    color: "#235aab",
    score: 5,
    name: "蓝球",
  },
  {
    id: 6,
    color: "#e382ae",
    score: 6,
    name: "粉球",
  },

  {
    id: 7,
    color: "#000001",
    score: 7,
    name: "黑球",
  },
  {
    id: 8,
    color: "#cc6633",
    score: 4,
    name: "犯规",
  },
];

const score = computed(() => {
  //累加list中所有元素的score属性
  return list.value.reduce((acc, cur) => acc + cur.score, 0);
});

function addBall(item) {
  list.value.push(item);
}
const reverseList = computed(() => {
  return list.value.slice().reverse();
});
//list数组反转
</script>

<template>
  <div class="index">
    <div class="score">{{ score }}</div>

    <div class="restart">
      <div @click="list = []">清零</div>
      <div @click="list = list.slice(0, list.length - 1)">撤销</div>
    </div>

    <div class="options">
      <Option v-for="item in optionList" :key="item.id" v-bind="item" :tap="true" @click="addBall(item)" />
    </div>

    <div class="history">进球记录</div>
    <div class="ball-list">
      <Option v-for="item in reverseList" :key="item.id" v-bind="item" />
    </div>
  </div>
</template>

<style lang="scss">
.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.score {
  font-size: 20vh;
}

.restart {
  display: flex;
  justify-content: space-around;
  gap: 2vh;

  & > div {
    margin-bottom: 2vh;
    font-size: 3vh;
    border: 1px solid #000;
    padding: 0.5vh 1vh;
    border-radius: 1vh;
  }
}

.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1vh;
}

.ball-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1vh;
}

.history {
  margin-top: 5vh;
  font-size: 4vh;
}
</style>
